<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"/>
  <xsl:param name="CSSClass">sitemap</xsl:param>
  <xsl:template match="/*">
    <xsl:apply-templates select="root" />
  </xsl:template>
  <xsl:template match="root">
    <!-- init menu -->
    <div id="topmenu">

      <!-- navigation -->
      <div class="basictab">
        <ul>
          <xsl:apply-templates select="node" mode="topLevel" />
          <li class="end">
            <a href="logoff.aspx" id="dnn_LOGIN_cmdLogin" class="SkinObject" >
              <span>Thoát</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="tabcontainer">
        <xsl:apply-templates select="node" mode="subLevel" />
      </div>
    <script type="text/javascript">
      //var indexMenu = 0;

      //ddtabmenu.definemenu("ddtabs3", indexMenu);


      var delayhide;
      $(".basictab li").mouseover(function() {

      showTab($(this).find("a").attr('rel'));

      });
      function showTab(obj) {
      $(".basictab").find("li").find("a:first").removeClass("current");
      $('.basictab a[rel="' + obj + '"]').addClass("current");
      $('div[id^=sb]').hide();
      $('#' + obj).css("display", "block");
      }
      $(document).ready(function() {

      $(".tabcontent").each(function(i) {
      var $parent = $('.basictab a[rel="' + $(this).attr('id') + '"]');
      var left = $parent.position().left;
      var width = $parent.width();
      var thisWidth = $(this).width();
      // alert($parent.html() + ' ' + thisWidth + ' ' + width);
      if (thisWidth / 2 &lt; left + width / 2) {
              var pLeft = 0;
              pLeft = left + width / 2 - thisWidth / 2 + 10;
              $(this).css('padding-left', pLeft + 'px');
          }
        });
          
        <xsl:apply-templates select="node" mode="initMenuLevel" />;
           
        $("#topmenu").mouseover(function() {
            if (window.delayhide)
                clearTimeout(delayhide);
        }).mouseout(
          function() {
            delayhide = setTimeout('<xsl:apply-templates select="node" mode="initMenuLevel" />', 100);
          }
        );
      });
    </script>

    </div>
  </xsl:template>


  <xsl:template match="node" mode="topLevel">
    <li>
      <xsl:choose>
        <xsl:when test="@enabled = 1">
          <xsl:attribute name="class">
            <xsl:choose>
              <xsl:when test="@breadcrumb = 1">
                first current
              </xsl:when>
              <xsl:otherwise>
              </xsl:otherwise>
            </xsl:choose>
          </xsl:attribute>
          <a href="{@url}" rel="sb{@id}">
            <xsl:attribute name="class">
              <xsl:choose>
                <xsl:when test="@breadcrumb = 1">
                  current
                </xsl:when>
                <xsl:otherwise>
                </xsl:otherwise>
              </xsl:choose>
            </xsl:attribute>
            <span>
              <xsl:value-of select="@text" />
            </span>
          </a>
        </xsl:when>
        <xsl:otherwise>
          <a href="{@url}" rel="sb{@id}">
            <span>
              <xsl:value-of select="@text" />
            </span>
          </a>
        </xsl:otherwise>
      </xsl:choose>
    </li>

  </xsl:template>

  <xsl:template match="node" mode="subLevel">
    <div class="tabcontent" id="sb{@id}" style="display: none;">
      <ul>
        <xsl:if test="node">
          <xsl:apply-templates select="node" />
        </xsl:if>
      </ul>
    </div>
  </xsl:template>


  <xsl:template match="node">
    <li>
      <xsl:choose>
        <xsl:when test="@enabled = 1">
          <a href="{@url}">
            <xsl:value-of select="@text" />
          </a> |
        </xsl:when>
        <xsl:otherwise>
          <xsl:value-of select="@text" />
        </xsl:otherwise>
      </xsl:choose>
    </li>
  </xsl:template>

  <xsl:template match="node" mode="initMenuLevel1">
    <xsl:choose>
      <xsl:when test="@breadcrumb = 1">
        indexMenu = <xsl:value-of select="position()" /> - 1;
      </xsl:when>
    </xsl:choose>
  </xsl:template>

  <xsl:template match="node" mode="initMenuLevel">
    <xsl:choose>
      <xsl:when test="@breadcrumb = 1">showTab("sb<xsl:value-of select="@id" />")</xsl:when>
    </xsl:choose>
  </xsl:template>

</xsl:stylesheet>